<template>
  <view class="tem-main">
    <view class="tem-header">
      <!-- <view class="tem-header-right">
        <view class="right-text">
          <text class="iconfont icon-qianjin title-icon"></text>
        </view>
      </view> -->

      <view class="tem-header-center">
        <view class="center-text">
          <view class="text1">累计上报天数</view>
          <view class="text2" @click="temList">
            <view class="text2-day">{{ reportDay }}</view>
            <view class="text2-day-text">天</view>
            <view class="iconfont icon-qianjin text2-icon"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="tem-report">
      <!-- <view class="tem-header">yishang</view> -->
      <view class="tem-content">
        <view class="info-content">
          <view class="info-main">
            <form @submit="formSubmit">
              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">日期</view>
                  <view class="item-content-input">
                    <view class="uni-input">{{ date }}</view>
                  </view>
                </view>
              </view>
              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">时间</view>
                  <view class="item-content-input">
                    <view class="uni-input">{{ time }}</view>
                  </view>
                </view>
              </view>

              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">姓名</view>
                  <view class="item-content-input">
                    <input
                      class="uni-input"
                      name="name"
                      :value="name"
                      placeholder="输入姓名"
                    />
                  </view>
                </view>
                <!-- <view class="title">姓名</view>
              <input class="uni-input" name="name" placeholder="输入姓名" /> -->
              </view>

              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">年龄</view>
                  <view class="item-content-input">
                    <input
                      class="uni-input"
                      name="age"
                      :value="age"
                      placeholder="输入年龄"
                    />
                  </view>
                </view>
              </view>
              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">性别</view>
                  <view class="item-content-input">
                    <radio-group name="gender">
                      <label>
                        <radio
                          style="transform: scale(0.7)"
                          color="#20b1ff"
                          value="男"
                          :checked="radio1"
                        />
                        <text>男</text>
                      </label>
                      <label>
                        <radio
                          style="transform: scale(0.7)"
                          color="#20b1ff"
                          :checked="radio0"
                          value="女"
                        />
                        <text>女</text>
                      </label>
                    </radio-group>
                  </view>
                </view>
              </view>

              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">电话</view>
                  <view class="item-content-input">
                    <input
                      class="uni-input"
                      name="phoneNumber"
                      :value="phoneNumber"
                      placeholder="输入电话"
                    />
                  </view>
                </view>
              </view>

              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">住址</view>
                  <view class="item-content-input">
                    <input
                      class="uni-input"
                      name="address"
                      :value="address"
                      placeholder="例:六号楼一栋628"
                    />
                  </view>
                </view>
              </view>

              <view class="uni-form-item uni-column">
                <view class="item-content">
                  <view class="title item-content-title">温度</view>
                  <view class="item-content-input">
                    <picker
                      mode="multiSelector"
                      :range="arrData"
                      :value="timesIndex"
                      @change="bindChange"
                    >
                      <view class="uni-input" style="color: #333"
                        >{{ arrData[0][dataIndex] }}.{{
                          arrData[1][dataIndexOne]
                        }}</view
                      >
                    </picker>
                  </view>
                </view>
              </view>
              <view class="uni-btn-v">
                <button plain="true" form-type="submit">立即上报</button>
                <!-- <button type="default" form-type="reset">Reset</button> -->
              </view>
            </form>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { testInfo } from "@/util/testInfo.js";
export default {
  data() {
    return {
      name: "1",
      age: "2",
      radio0: false,
      radio1: false,
      phoneNumber: "3",
      address: "4",
      dataIndex: 1,
      dataIndexOne: 4,
      arrData: [
        ["35", "36", "37", "38", "39", "40", "41", "42"],
        ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      ],
      timesIndex: [1, 4],
      time: "18:01",
      date: "",
      reportDay: 365,
      openid: "",
    };
  },
  onShow() {
    this.dataIndex = 1;
    this.dataIndexOne = 4;
    let getTime = new Date();
    this.time = `${this.appendZero(getTime.getHours())}:${this.appendZero(
      getTime.getMinutes()
    )}`;
    this.date = `${getTime.getFullYear()}-${this.appendZero(
      getTime.getMonth() + 1
    )}-${this.appendZero(getTime.getDate())}`;
    this.getPeopleInfo();
    console.log(this.time);
  },
  components: {},
  methods: {
    //获取默认的信息
    getPeopleInfo() {
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          // console.log(res);
          that.openid = res.data;
          that
            .$MyRequest({
              url: "/get_all_people",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              // console.log(res);
              let defaultdata = res.data.data[0];
              that.name = defaultdata.name;
              that.address = defaultdata.address;
              that.age = defaultdata.age;
              that.phoneNumber = defaultdata.phone;
              if (defaultdata.gender == 1) {
                that.radio1 = true;
              } else {
                that.radio0 = true;
              }
              // that.tableList = res.data.data;
              // console.log(that.tableList);
              // that.tableList = that.tableList.map((s) => {
              //   if (s.all_state < 0) {
              //     s.all_state = "处理中";
              //   } else {
              //     s.all_state = "已处理";
              //   }
              //   return s;
              // });
              // that.tableList.reverse();
            });
          that
            .$MyRequest({
              url: "/get_tem",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              // console.log(res);
              that.reportDay = res.data.data.length;
              // that.tableList.reverse();
            });
        },
        fail: (err) => {},
      });
    },
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    //温度选择框
    bindChange(e) {
      // console.log(e.detail.value)
      this.dataIndex = e.detail.value[0];
      this.dataIndexOne = e.detail.value[1];
      // console.log(this.dataIndex, this.dataIndexOne);
    },
    //上报
    formSubmit(e) {
      let formdata = e.detail.value;
      // console.log(formdata);
      let tem =
        this.arrData[0][this.dataIndex] +
        "." +
        this.arrData[1][this.dataIndexOne];
      // console.log(tem);
      this.$MyRequest({
        url: "/set_tem_report",
        method: "POST",
        data: {
          openid: this.openid,
          name: formdata.name,
          age: formdata.age,
          gender: formdata.gender,
          phoneNumber: formdata.phoneNumber,
          address: formdata.address,
          tem: tem,
          time: this.date + " " + this.time,
        },
      }).then((result) => {
        // console.log(result);
        if (result.data.mesg == "已上报") {
          let that = this;
          uni.showModal({
            title: "提示",
            content: "今日已上报",
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
                // that.temList();
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        } else {
          // 上报成功跳转
          uni.showToast({
            title: "上报成功",
            duration: 1500,
          });
          setTimeout(() => {
            this.temList();
          }, 1500);
        }
        // uni.navigateTo({ url: "/pages/home/service/TemperatureList" });
      });
    },
    //温度列表
    temList() {
      uni.navigateTo({ url: "/pages/home/service/TemperatureList" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.tem-main {
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.tem-header {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background-color: $uni-bg-color;
  .tem-header-center {
    width: 100%;
    @include center;
    padding-top: 30rpx;
    // height: 300rpx;
    // right: 50rpx;
    // font-size: 30rpx;
    .center-text {
      color: #fff;
      .text1 {
        font-size: 35rpx;
        @include center;
      }
      .text2 {
        display: flex;
        justify-content: center;
        .text2-day {
          font-size: 40rpx;
          color: #faa42cd2;
          font-weight: bold;
          // @include bottom;
        }
        .text2-day-text {
          padding-left: 7rpx;
          @include center;
          padding-top: 7rpx;
          font-size: 25rpx;
        }
        .text2-icon {
          font-size: 10rpx !important;
          color: $uni-bg-color-hover;
          padding-top: 10rpx;
          padding-left: 7rpx;
          @include center;
        }
      }
    }
  }
}
.tem-report {
  position: absolute;
  top: 150rpx;
  left: 0;
  z-index: 300;
  width: 100%;
  // height: 100vh;
  // background-color: $uni-color-indexBg;
  padding: 10rpx 30rpx;
  padding-top: 0;
  box-sizing: border-box;
  .tem-content {
    background-color: $uni-color-mainBg;
    box-sizing: border-box;
    padding: 0 12rpx;
    border-radius: 2%;
    .info-content {
      // box-sizing: border-box;
      // padding: 0 15rpx;
      margin: 0 15rpx;
      // border-radius: 2%;
      // background-color: $uni-color-mainBg;
      // margin-bottom: 50rpx;
      .info-main {
        padding: 0 15rpx;
        background-color: $uni-color-mainBg;
        box-sizing: border-box;
        .uni-column {
          border-bottom: 1rpx solid #d8d8de;
          padding: 12rpx 0;
          .item-content {
            display: flex;
            align-items: center;
            .title {
              // font-size: 55rpx;
              font-size: 30rpx;
              padding: 20rpx 0;
            }
            .item-content-input {
              padding-left: 80rpx;
              .uni-input {
                // padding-left: 40rpx;
                font-size: 30rpx;
                color: #c0c0c0;
              }
            }
          }
          // .title {
          //   padding: 30rpx 0;
          // }
        }
        .uni-btn-v {
          padding: 50rpx 0 20rpx 0;
          // border-top: 0 20rpx solid;
          button {
            width: 50%;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #fff;
            // size: 10;
            height: 70rpx;
            @include center;
            background-color: $uni-color-primary;
            border: none;
          }
        }
      }
      .info-step {
        // margin-top: 20%;
        width: 100%;
        padding: 30rpx 0;
        box-sizing: border-box;
        // marggn-top: 100rpx;
        // background-color: $uni-color-mainBg;
        .uni-steps {
          // height: 200rpx;
          background-color: $uni-color-mainBg;
          active-color: $uni-color-primary;
          // transform: scale(1.1);
          padding: 60rpx 0;

          box-sizing: border-box;
          // @include center;
          // font-size:80rpx;
          .uni-steps__row {
            // transform: scale(1.8);
          }
        }
      }
      .info-step-test {
        background-color: $uni-color-mainBg;
        padding: 0 0 20rpx 0;
        @include center;
        color: $uni-color-warning;
      }
    }
  }
}
</style>
